<template>
<!--类目属性-->
<div v-if="editDialogVisible7">
    <el-form>
        <el-table :data="categoryPropertyData" border style="width: 100%">
            <el-table-column label="属性项名称" prop="attrName">
            </el-table-column>
            <el-table-column label="属性值">
                <template slot-scope="scope">
                    <template v-if="scope.row.categoryPropertyValueResponseList[0].isChecked!=3">
                        <el-radio-group v-model="categoryPropertyRadio[scope.$index]">
                            <el-radio v-for="(item,index) in scope.row.categoryPropertyValueResponseList" :key="index" @change="changeCategoryPropertyRadio(scope.$index,scope.row.attrId,item.valueId)" :label="item.valueId">{{item.valueName}}
                            </el-radio>
                        </el-radio-group>
                    </template>
                    <template v-else>
                        <el-input v-model="scope.row.categoryPropertyValueResponseList[0].valueName" style="width: 300px" placeholder="请输入内容"></el-input>
                        <el-button @click="updateProductPropertyValue(scope.row)" size="mini" type="primary">确认</el-button>
                    </template>
                </template>

            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button :size="size" type="primary" @click="handleClearCategoryPropertyRadio(scope.$index, scope.row)">清除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--底部按钮栏-->
        <el-row id="footerButton">
            <el-col :span="8" :offset="10">
                <el-form-item>
                    <el-button :size="size" type="primary" @click.native="submitFormCategoryProperty" :loading="editLoading">{{ $t("action.submit") }}
                    </el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</div>
</template>

<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import {
    format,
    formatDate
} from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

export default {
    components: {
        KtButton,
        CyTable,
        TableColumnFilterDialog
    },
    data() {
        return {
            testRule: {},
            valueName: "",
            size: "small",
            editDialogVisible7: false,
            editLoading: false,
            productId: 0,
            categoryPropertyRadio: [],
            categoryPropertyData: [],
            attNameId: [],
            rules: {
                name: [{
                    required: true,
                    message: '请选择活动类目',
                    trigger: 'change'
                }]
            }
        };
    },
    mounted() {},
    methods: {
        updateProductPropertyValue: function (row) {
            let this_ = this
            let param = {}
            param.name = row.categoryPropertyValueResponseList[0].valueName
            param.id = row.categoryPropertyValueResponseList[0].valueId
            this.utils.request.updateProductPropertyValue(param, function (data) {
                if (data.code == "0000") {
                    this_.$message({
                        message: "操作成功",
                        type: "success"
                    });
                } else {
                    this_.$message({
                        message: "操作失败, " + data.message,
                        type: "error"
                    });
                }
            });

        },
        init(param) {
            this.editDialogVisible7 = param.flag
            this.productId = param.productId
            if (param.flag) {
                this.queryProductPrice(param)
            }
        },
        queryProductPrice(param) {
            //类目属性查询
            debugger
            let this_ = this
            this_.categoryPropertyRadio = [];
            this_.categoryPropertyData = [];
            this.utils.request.queryProductCategory(param, function (data) {
                if (data.data != null) {
                    this_.categoryPropertyData = data.data
                    $.each(data.data, function (index1, val1) {
                        $.each(val1.categoryPropertyValueResponseList, function (index2, val2) {
                            if (val2.isChecked == 1) {
                                this_.categoryPropertyRadio[index1] = val2.valueId;
                            } else {}
                        })
                    })

                }
            });
        },
        //属性值切换
        changeCategoryPropertyRadio(index, attNameId, valueId) {
            this.categoryPropertyRadio[index] = valueId;
            this.attNameId[index] = attNameId
        },
        //清除商品属性值
        handleClearCategoryPropertyRadio(index, params) {
            this.categoryPropertyRadio.splice(index, 1, undefined);
        },
        //商品属性值保存
        submitFormCategoryProperty() {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
                let this_ = this;
                let params = {};
                let productPropertyRequestList = [];
                params.productId = this_.productId;
                let lng = this.categoryPropertyData.length;
                for (let i = 0; i < lng; i++) {
                  let item = this_.categoryPropertyRadio[i];
                  if(item){
                      let productProperty = {};
                      productProperty.valueId = item
                      productProperty.attrId = this_.categoryPropertyData[i].attrId;
                      productPropertyRequestList.push(productProperty);
                  } else {
                      this.$message.info("请选择"+this.categoryPropertyData[i].attrName);
                      return false;
                  }
                }
                if(productPropertyRequestList.length==0){
                    this.$message({message: "没有需要提交的数据", type: "warning"});
                    return false;
                }
                params.productPropertyRequest = productPropertyRequestList;
                this.utils.request.savePropertyNameRelation(params, function (data) {
                    if (data.code == "0000") {
                        this_.$message({
                            message: "操作成功",
                            type: "success"
                        });
                    } else {
                        this_.$message({
                            message: "操作失败, " + data.message,
                            type: "error"
                        });
                    }
                });
            });
        },
    }
};
</script>

<style scoped>

</style>
